<template>
	<view style="height: 100%;">
		
		<!-- 头部自定义导航栏 -->
		<!-- <navBar left-icon="back" left-text="返回" right-text="菜单" title="标题"></navBar> -->

		<!-- <view style="margin-top: 50rpx;"> -->
		<!-- <view style="display: flex; justify-content: space-between; padding: 20rpx;"> -->

		<!-- 左侧图标 -->
		<!-- <view
					style=" display: flex; height: 65rpx; width: 65rpx; border-radius: 50%; background-color: #FEFAFC;">
					<view class="iconfont icon-QQ"
						style="height: 65rpx; width: 65rpx; display: flex;justify-content: center;align-items: center;">
					</view>
				</view> -->
		<!-- 中间标题 -->
		<!-- <view>
					just For test
				</view> -->

		<!-- 右侧头像 -->
		<!-- <view
					style=" display: flex; height: 65rpx; width: 65rpx; border-radius: 50%; background-color: #FEFAFC;">
					<view class="iconfont icon-QQ"
						style="height: 65rpx; width: 65rpx; display: flex;justify-content: center;align-items: center;">
					</view>
				</view> -->


		<!-- </view> -->
		<!-- </view> -->
		<!-- 轮播图 -->
		<view class="mt2 mb3">
			<swiper class="swiper" :autoplay="true" next-margin="80rpx" easing-function="easeOutCubic" interval="3000"
				duration="1000" style="height: 300rpx; width: 100%; ">
				<!-- 此处通过width调整边距 -->

				<block v-for="(item,index) in picList" :key="index">
					<swiper-item style="height: 100%; width: 550rpx;">

						<view style="height: 100%; border-radius: 80rpx; width: 550rpx; ">
							<image style="height: 100%; width: 100%;border-radius: 80rpx;" mode="aspectFill"
								:src="item">
							</image>
						</view>
					</swiper-item>
				</block>


			</swiper>
		</view>
		
		<!-- <view class="blb shape flex" style="width: 200rpx; height: 200rpx; color: #111111; justify-content: center;align-items: center;"> 抽取 </view> -->

		<!-- 抽取按钮 -->
		<aylottery v-if="isClickChooseIcon" :type="6" canvasId="canvasId3" :height="200" :width="600" refs="card"
			style="margin: 40upx;" @complete="seatShow" :disabled="false" title="刮自定义" watermark="刮一刮">
			<view style="position: absolute; top: 30rpx; left: 200rpx;">
				<view style="margin: 40upx;">
					<text v-if="AlreadyMatchSeat>0">{{AlreadyMatchSeat}} 号</text>
					<text v-if="AlreadyMatchSeat==0">匹配失败</text>
				</view>
			</view>

		</aylottery>
		<view v-if="AlreadyMatchSeat==0" @click="chooseSeat" class="flex ml2 mr2"
			style="justify-content: center; align-items: center; height: 100rpx; border: #000000 10rpx solid;"> 抽取 </view>

		<view  v-if="AlreadyMatchSeat>0" class="flex ml2 mr2"
			style="justify-content: center; align-items: center; height: 100rpx; border: #000000 10rpx solid; "> 当前已匹配
			{{AlreadyMatchSeat}} </view>
		<!-- 烟花动画 -->

		<!-- <firework></firework> -->

		<!-- 排序标签 -->
		<view style="width: 100%; margin-top: 30rpx;">
			<!-- 标签 -->
			<view style="display: flex; padding: 20rpx; justify-content: space-between; align-items: center;">
<!-- 				<view class="iconfont icon-nan" style="font-size: 20rpx; display: flex;  height: 30rpx; width: 120rpx;padding: 10rpx; background-color: #FFFFFF; justify-content: center;align-items: center;font-size: 25rpx; border: #000000 10rpx solid;">
					<view class="flex blb" style="margin-left: 5rpx; font-size: 20rpx; width: 100%;">匹配时长</view>
				</view> -->
				
				<view class="flex blb" style="border: #000000 8rpx solid; justify-content: center;align-items: center;">
					<view class="iconfont icon-nan" style="font-size: 20rpx; padding: 5rpx;"></view>
					<view style="font-size: 20rpx; padding: 5rpx;">匹配时长</view>
				</view>

				<view class="flex blb" style="border: #000000 8rpx solid; justify-content: center;align-items: center;">
					<view class="iconfont icon-nan" style="font-size: 20rpx; padding: 5rpx;"></view>
					<view style="font-size: 20rpx; padding: 5rpx;">匹配次数</view>
				</view>
				
				<view class="flex blb" style="border: #000000 8rpx solid; justify-content: center;align-items: center;">
					<view class="iconfont icon-nv" style="font-size: 20rpx; padding: 5rpx;"></view>
					<view style="font-size: 20rpx; padding: 5rpx;">匹配时长</view>
				</view>
				
				<view class="flex blb" style="border: #000000 8rpx solid; justify-content: center;align-items: center;">
					<view class="iconfont icon-nv" style="font-size: 20rpx; padding: 5rpx;"></view>
					<view style="font-size: 20rpx; padding: 5rpx;">匹配次数</view>
				</view>

			</view>


		</view>


		<!-- 排名列表 -->
		<!-- <view> -->
			<!-- 第一名可以考虑独占一行

		<!-- 图片文字 -->
			<!-- <view style="display: flex; flex-wrap: wrap;"> -->

				<!-- <block v-for="(item, index) in rankList" :key="index"> -->
					<!-- 图片 -->
					<!-- <view -->
						<!-- style="display: flex; flex-direction: column; width: 300rpx; height: 430rpx; padding-left: 50rpx; padding-top: 20rpx; margin-top: 15rpx;"> -->
						<!-- <image :src="item" style="width: 300rpx; height: 100%;border-radius: 70rpx;" mode="aspectFill"> -->
						<!-- </image> -->
						<!-- <view style="display: flex;"> -->
							<!-- 文字 点赞按钮 -->
							<!-- <view class="pl2 pt1" style="width: 200rpx;"> -->
								<!-- <view class="font_bold" style="font-size: 20rpx;">昵称</view> -->
								<!-- <view style="color: #CCCCCC; font-size: 15rpx;">个性签名</view> -->
							<!-- </view> -->

							<!-- <view class="flex iconfont icon-xihuan1" style="margin-left: auto; align-items: flex-end;"> -->
							<!-- </view> -->

						<!-- </view> -->
					<!-- </view> -->
				<!-- </block> -->

			<!-- </view> -->
		<!-- </view> -->
		
		
		<!-- 排行榜单 -->
		
		<view class="ml2 mr2" style="height: 100%; border: #000000 10rpx solid; border-radius: 3%;">
			<!-- 第一行 -->
			<block v-for="r in PlayerMatchCountRank">
			<view class="flex ml2 mr2" style="align-items: center; border-bottom: #000000 1rpx solid;padding-bottom: 10rpx;margin-top: 35rpx;">
				<!-- 名次 -->
				<view style="font-weight: bold; width: 70rpx;">{{r[0]}}st</view>
				<!-- 头像 -->
				<image  :src="r[1]" style="height: 60rpx; width:60rpx; border-radius: 50%;margin-left: 20rpx;"></image>
				<!-- 昵称 -->
				<view style="margin-left: 20rpx;">{{r[2]}}</view>
				<!-- 分数 -->
				<view style="margin-left: auto;">{{r[3]}}</view>
				<view>分钟</view>
			</view>
			</block>
			
			<view class="flex ml2 mr2 mt3" style="align-items: center; border-bottom: #000000 2rpx solid;padding-bottom: 10rpx;margin-top: 35rpx;">
				<!-- 名次 -->
				<view class="" style="font-weight: bold; width: 70rpx;">3st</view>
				<!-- 头像 -->
				<image  src="../../static/ziliao_bg.png" style="height: 60rpx; width:60rpx; border-radius: 50%;margin-left: 20rpx;"></image>
				<!-- 昵称 -->
				<view style="margin-left: 20rpx;">隐姓埋名</view>
				<!-- 分数 -->
				<view style="margin-left: auto;">12分钟</view>
			</view>
			
			<view class="flex ml2 mr2 mt3" style="align-items: center; border-bottom: #000000 2rpx solid;padding-bottom: 10rpx;margin-top: 35rpx;">
				<!-- 名次 -->
				<view style="font-weight: bold;width: 70rpx;">4st</view>
				<!-- 头像 -->
				<image  src="../../static/1.png" style="height: 60rpx; width:60rpx; border-radius: 50%;margin-left: 20rpx;"></image>
				<!-- 昵称 -->
				<view style="margin-left: 20rpx;">昵称</view>
				<!-- 分数 -->
				<view style="margin-left: auto;">12分钟</view>
			</view>
			
			<view class="flex ml2 mr2 mt3" style="align-items: center; border-bottom: #000000 2rpx solid;padding-bottom: 10rpx;margin-top: 35rpx;">
				<!-- 名次 -->
				<view style="font-weight: bold;width: 70rpx;">5st</view>
				<!-- 头像 -->
				<image  src="../../static/1.png" style="height: 60rpx; width:60rpx; border-radius: 50%;margin-left: 20rpx;"></image>
				<!-- 昵称 -->
				<view style="margin-left: 20rpx;">昵称</view>
				<!-- 分数 -->
				<view style="margin-left: auto;">12分钟</view>
			</view>
			
			
			<view class="flex ml2 mr2 mt3" style="align-items: center; border-bottom: #000000 2rpx solid;padding-bottom: 10rpx;margin-top: 35rpx;">
				<!-- 名次 -->
				<view style="font-weight: bold;width: 70rpx;">6st</view>
				<!-- 头像 -->
				<image  src="../../static/1.png" style="height: 60rpx; width:60rpx; border-radius: 50%;margin-left: 20rpx;"></image>
				<!-- 昵称 -->
				<view style="margin-left: 20rpx;">昵称</view>
				<!-- 分数 -->
				<view style="margin-left: auto;">12分钟</view>
			</view>
			
			
			<view class="flex ml2 mr2 mt3" style="align-items: center; border-bottom: #000000 2rpx solid;padding-bottom: 10rpx;margin-top: 35rpx;">
				<!-- 名次 -->
				<view style="font-weight: bold;width: 70rpx;">7st</view>
				<!-- 头像 -->
				<image  src="../../static/1.png" style="height: 60rpx; width:60rpx; border-radius: 50%;margin-left: 20rpx;"></image>
				<!-- 昵称 -->
				<view style="margin-left: 20rpx;">昵称</view>
				<!-- 分数 -->
				<view style="margin-left: auto;">12分钟</view>
			</view>
			
			<view class="flex ml2 mr2 mt3" style="align-items: center; border-bottom: #000000 2rpx solid;padding-bottom: 10rpx;margin-top: 35rpx;">
				<!-- 名次 -->
				<view style="font-weight: bold;width: 70rpx;">8st</view>
				<!-- 头像 -->
				<image  src="../../static/1.png" style="height: 60rpx; width:60rpx; border-radius: 50%;margin-left: 20rpx;"></image>
				<!-- 昵称 -->
				<view style="margin-left: 20rpx;">昵称</view>
				<!-- 分数 -->
				<view style="margin-left: auto;">12分钟</view>
			</view>
			
			<view class="flex ml2 mr2 mt3" style="align-items: center; border-bottom: #000000 2rpx solid;padding-bottom: 10rpx;margin-top: 35rpx;">
				<!-- 名次 -->
				<view style="font-weight: bold;width: 70rpx;">9st</view>
				<!-- 头像 -->
				<image  src="../../static/1.png" style="height: 60rpx; width:60rpx; border-radius: 50%;margin-left: 20rpx;"></image>
				<!-- 昵称 -->
				<view style="margin-left: 20rpx;">昵称</view>
				<!-- 分数 -->
				<view style="margin-left: auto;">12分钟</view>
			</view>
			
			
			<view class="flex ml2 mr2 mt3" style="align-items: center; border-bottom: #000000 2rpx solid;padding-bottom: 10rpx;margin-top: 35rpx;">
				<!-- 名次 -->
				<view style="font-weight: bold;width: 70rpx;">10st</view>
				<!-- 头像 -->
				<image  src="../../static/1.png" style="height: 60rpx; width:60rpx; border-radius: 50%;margin-left: 20rpx;"></image>
				<!-- 昵称 -->
				<view style="margin-left: 20rpx;">昵称</view>
				<!-- 分数 -->
				<view style="margin-left: auto;">12分钟</view>
			</view>
			
		</view>


		<!-- 自定义底部导航栏1 -->
		<!-- <view class="flex" style="height: 110rpx; position: fixed; left: 0rpx;right: 0rpx; bottom: 0rpx;
		justify-content: center;align-items: center;background-color: #111111;">
			<view @click="enter_page('index/index')" class="flex iconfont icon-shouye font_bold" style="flex:1; justify-content: center; align-items: center; font-size: 40rpx; color: #787878;"></view>
			<view @click="enter_page('order/order')" class="flex iconfont icon-faxian font_bold" style="flex:1; justify-content: center; align-items: center; font-size: 40rpx; color: #787878;"></view>
			<view @click="enter_page(3)" class="flex iconfont icon-xiaoxi font_bold" style="flex:1; justify-content: center; align-items: center; font-size: 40rpx; color: #787878;"></view>
			<view @click="enter_page(4)" class="flex iconfont icon-geren font_bold" style="flex:1; justify-content: center; align-items: center; font-size: 40rpx; color: #787878;"></view>
		</view> -->
		<!-- 自定义底部导航栏2 -->
		<!-- <bottom-navbar @enter_page='enter_page'></bottom-navbar> -->


	</view>
</template>

<script>
	import navBar from '@/components/uni-ui/uni-nav-bar/uni-nav-bar.vue'
	import firework from '@/components/uni-ui/ay-firework/firework.vue'
	import * as animationData from "@/common/lottie/lanseyanhua.json"
	import aylottery from '@/components/uni-ui/ay-lottery/ay-lottery.vue'

	export default {
		components: {
			navBar,
			firework,
			aylottery,
		},

		data() {
			return {
				// 轮播图列表
				// picList:[]
				AlreadyMatchSeat: 0,
				isSelectIcon: false,
				isClickChooseIcon: false,
				picList: [],
				PlayerMatchCountRank: [],

			}
		},
		onLoad() {
			uni.request({
				//  'http://175.178.54.244:33333/frontend'
				url: this.baseUrl + "/frontend", //仅为示例，并非真实接口地址。

				method: "POST",
				data: {
					actionid: 20000,
					RoleGuid: "19f05c70e76411eaac42b42e99ce0512"
				},
				header: {
					'content-type': 'application/json',
				},
				success: (res) => {
					this.AlreadyMatchSeat = res.data.AlreadyMatchSeat
					this.picList = res.data.HeadList
					res.data.PlayerMatchCountRank.forEach((item) => {
						console.log("返回的数据item"+ item)
						this.PlayerMatchCountRank.push(item)
					})
				}
			});
		},


		methods: {
			// enter_page(path){
			// 	console.log(path)
			// 	uni.navigateTo({
			// 		url:path
			// 	})
			// },
			chooseSeat() {
				// 改变按钮状态
				this.isClickChooseIcon = !this.isClickChooseIcon
				// 发起请求
				uni.request({
					url: this.baseUrl + "/frontend", //仅为示例，并非真实接口地址。
					method: "POST",
					data: {
						actionid: 20005,
						RoleGuid: "19f05c70e76411eaac42b42e99ce0512"
					},
					header: {
						'content-type': 'application/json',
					},
					success: (res) => {
						this.AlreadyMatchSeat = res.data.SeatId
					}
				});
			}
		}
	}
</script>

<style>
	page{
		height: 100%;
	}
	.selectOrderIcon {
		color: #ff557f;

	}

	.shape {
		/* margin: 100px auto; */
		width: 300px;
		height: 300px;
		background: black;
		clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
		animation: 4s trans infinite alternate ease-in-out;
		transform-origin: center;

	}

	@keyframes trans {
		from {
			clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
		}

		to {
			clip-path: polygon(50% 30%, 100% 0%, 70% 50%, 100% 100%, 50% 70%, 0% 100%, 30% 50%, 0% 0%);
		}
	}
</style>
